<template>
  <div class="health">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">居民健康申报表</span>
      <span class="header-wrap-right"></span>
    </div>
    <!-- 选择省市区 -->
    <div class="health-content" style="margin-top: 1.3rem;">
      <div class="health-list" @click='againCity' v-if="address">
        <span>{{ address }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="health-list" @click='againCity' v-else>
        <span>请选择区域</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 选择街道 -->
    <div class="health-content">
      <div class="health-list" @click='showstreet' v-if="streetValue">
        <span>{{ streetValue }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="health-list" @click='showstreet' v-else>
        <span>请选择街道</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 填写小区 -->
    <div class="health-content">
      <div class="health-list">
        <van-field clearable v-model="residential_name" placeholder="请输入小区名称"/>
      </div>
    </div>
    <!-- 具体地址 -->
    <div class="health-content">
      <div class="health-list">
        <van-field clearable v-model="SpecificAddress" placeholder="请输入具体地址"/>
      </div>
    </div>
    <div class="health-content">
      <div class="objbox" v-for="(objList,index) in postList" :key="index">
        <van-collapse v-model="activeNames" @change='markopen(index)'>
          <van-collapse-item :name="index">
            <div slot="title">人员列表{{ index + 1 }}</div>
            <div class="delPeople">
              <span @click="delList(index)">删除</span>
            </div>
            <div class="health-list">
              <van-field clearable v-model="objList.name" placeholder="请输入姓名"/>
            </div>
            <div class="health-content">
              <div class="health-list">
                <van-field clearable v-model="objList.idnum" placeholder="请输入身份证"/>
              </div>
            </div>
            <div class="health-content">
              <div class="health-list">
                <van-field type="number" clearable v-model="objList.mobile" placeholder="请输入手机号"/>
              </div>
            </div>
            <div class="health-content">
              <div class="health-list">
                <van-field type="number" clearable v-model="objList.celsius" placeholder="请输入体温"/>
              </div>
            </div>
            <van-radio-group v-model="objList.type">
              <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">与业主关系</div>
              <van-cell-group>
                <van-cell title="业主" clickable @click="objList.type = '0'">
                  <van-radio slot="right-icon" name="0"/>
                </van-cell>
                <van-cell title="妻子" clickable @click="objList.type = '1'">
                  <van-radio slot="right-icon" name="1"/>
                </van-cell>
                <van-cell title="子女" clickable @click="objList.type = '2'">
                  <van-radio slot="right-icon" name="2"/>
                </van-cell>
                <van-cell title="父母" clickable @click="objList.type = '3'">
                  <van-radio slot="right-icon" name="3"/>
                </van-cell>
                <van-cell title="兄妹" clickable @click="objList.type = '4'">
                  <van-radio slot="right-icon" name="4"/>
                </van-cell>
                <van-cell title="其他" clickable @click="objList.type = '5'">
                  <van-radio slot="right-icon" name="5"/>
                </van-cell>
                <van-cell title="丈夫" clickable @click="objList.type = '6'">
                  <van-radio slot="right-icon" name="6"/>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
            <van-radio-group v-model="objList.sex">
              <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">性别</div>
              <van-cell-group>
                <van-cell title="男" clickable @click="objList.sex = '1'">
                  <van-radio slot="right-icon" name="1"/>
                </van-cell>
                <van-cell title="女" clickable @click="objList.sex = '2'">
                  <van-radio slot="right-icon" name="2"/>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
            <van-radio-group v-model="objList.been_hubei">
              <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">14天内我在湖北省居住或到过湖北省</div>
              <van-cell-group>
                <van-cell title="否" clickable @click="objList.been_hubei = '0'">
                  <van-radio slot="right-icon" name="0"/>
                </van-cell>
                <van-cell title="是" clickable @click="objList.been_hubei = '1'">
                  <van-radio slot="right-icon" name="1"/>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
            <van-radio-group v-model="objList.symptom">
              <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align:center;">您是否有一下症状（如发热、乏力、干咳等）</div>
              <van-cell-group>
                <van-cell title="否" clickable @click="objList.symptom = '0'">
                  <van-radio slot="right-icon" name="0"/>
                </van-cell>
                <van-cell title="是" clickable @click="objList.symptom = '1'">
                  <van-radio slot="right-icon" name="1"/>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
            <van-radio-group v-model="objList.touch_hubeipatient" style="margin-bottom: .2rem;">
              <div style="font-weight:bold;height:auto;line-height:.4rem;text-align:center;word-wrap: break-word;word-break: normal;">
                14天内我接触过来自湖北省的发热、乏力、干咳等症状的患者
              </div>
              <van-cell-group>
                <van-cell title="否" clickable @click="objList.touch_hubeipatient = '0'">
                  <van-radio slot="right-icon" name="0"/>
                </van-cell>
                <van-cell title="是" clickable @click="objList.touch_hubeipatient = '1'">
                  <van-radio slot="right-icon" name="1"/>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </van-collapse-item>
          <!-- <div class="titlePeoPle">人员列表{{objList.lenght}}</div> -->
        </van-collapse>
      </div>
      <!-- 备注 -->
      <div class="health-content">
        <div class="health-list">
          <van-field clearable v-model="remark" placeholder="请输入备注"/>
        </div>
      </div>
      <div style="display:flex;margin:0 .2rem 0rem .3rem;">
        <span class="health-title">添加列表</span>
        <span style="flex:2;text-align:right;margin-right:.1rem;">
        <img @click="addList()" style="vertical-align: middle;width:.5rem;height:.5rem;" src="../../assets/images/add.png" alt="">
      </span>
      </div>
      <!-- 确定 -->
      <div class="health-content" style="margin: .7rem .3rem .5rem;">
        <div class="submit" @click="post">
          确定
        </div>
      </div>
    </div>
    <!-- 地址弹窗 -->
    <van-popup v-model="showpopup" position="bottom">
      <div v-show="flag">
        <van-area :area-list="areaList"
                  :visible-item-count=5
                  @confirm="onAddrConfirm"
                  @cancel="cancel"
                  :value="addrCode"/>
      </div>
    </van-popup>
    <!-- 街道弹窗 -->
    <van-popup v-model="mark" position="bottom">
      <div v-show="street">
        <van-picker :columns="columns"
                    show-toolbar
                    @cancel="mark=false"
                    @confirm="streetFn"/>
      </div>
    </van-popup>
  </div>
</template>
<script>
import api from '../../api/api.js'
import {Area, Popup, Picker, Dialog, Field, RadioGroup, Radio, Cell, CellGroup, CollapseItem, Collapse} from 'vant';

export default {
  data() {
    return {
      areaList: null,
      activeNames: [],
      postList: [
        {
          celsius: '',
          name: '',
          mobile: '',
          idnum: '',
          type: '0',
          sex: '1',
          been_hubei: '0',
          symptom: '0',
          touch_hubeipatient: '0',
        }
      ],
      residential_name: '',
      remark: '',
      columns: [],
      flag: false,
      showpopup: false,
      ShowConfirm: false,
      mark: false,
      street: false,
      streetValue: '',
      streetCode: '',
      sexId: '',
      addrCode: '530103',
      address: '',
      SpecificAddress: '',
      city: '',
      district: '',
      districtId: '',
      type: '',
      typeId: '',
      account_number: '',
    }
  },
  created() {
    this.getarea()
  },
  methods: {
    markopen(index) {
      console.log(index)
    },
    goback() {
      this.$router.go(-1)
    },
    // 添加人员列表
    addList() {
      this.postList = [
        ...this.postList,
        {
          celsius: '',
          name: '',
          mobile: '',
          idnum: '',
          type: '0',
          sex: '1',
          been_hubei: '1',
          symptom: '1',
          touch_hubeipatient: '1',
        }
      ]
    },
    // 删除人员列表
    delList(index) {
      this.postList.splice(index, 1)
    },
    // 获取省市区
    getarea() {
      this.$jsonp(api.source.health_area, {
        callbackName: 'jsonpCallback'
      })
        .then((response) => {
          this.areaList = response
        })
        .catch((error) => {
          console.log(error)
        });
    },
    // 获取街道
    getcelsius() {
      this.$get(api.getStreet, {
        params: {
          area_code: this.districtId
        }
      })
        .then((response) => {
          this.columns = response.data.data
          this.columns.forEach((element, index) => {
            this.columns[index].text = element.short_name
            this.columns[index].value = element.street_code
            this.columnsCode = this.columns[index].value
          });
        })
        .catch((error) => {
          console.log(error)
        });
    },
    // 点击选择按钮，省市区弹窗
    againCity() {
      this.showpopup = true
      this.flag = true
    },
    // 点击选择按钮，街道弹窗
    showstreet() {
      if (!this.address) {
        this.$toast('请先选择城市区域')
      } else {
        this.mark = true
        this.street = true
      }
    },
    streetFn(picker, value, index) {
      this.streetValue = picker.short_name
      this.streetCode = picker.street_code
      this.mark = false
      this.street = false
    },
    cancel() {
      this.showpopup = false
      this.flag = false
      this.mark = false
      this.street = false
    },
    // 点击确认，获取所选的省市区数据，确定选择,返回的必定是三元素数组
    onAddrConfirm(value) {
      this.province = value[0].name
      this.city = value[1].name
      this.district = value[2].name
      this.districtId = value[2].code
      this.showpopup = false
      this.flag = false
      this.address = this.province + this.city + this.district
      this.getcelsius()
    },
    post() {
      // if(this.lenght==0){
      //   this.$toast('请添加列表')
      //   return
      // }
      this.postList.forEach((element, index) => {
        var reg = /^([1][0-9]{10})$/;
        var regPartton = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
        if (!this.address) {
          this.$toast('请选择城市区域')
          return
        }
        if (!this.streetValue) {
          this.$toast('请选择街道')
          return
        }
        if (!this.residential_name) {
          this.$toast('请输入小区名称')
          return
        }
        if (!this.SpecificAddress) {
          this.$toast('请输入具体地址')
          return
        }
        if (!this.postList[index].name) {
          this.$toast('请输入姓名')
          return
        }
        if (!this.postList[index].idnum) {
          this.$toast('请输入身份证')
          return
        }
        if (!regPartton.test(this.postList[index].idnum)) {
          this.$toast('身份证格式不正确')
          return
        }
        if (!this.postList[index].mobile) {
          this.$toast('请输入手机号')
          return
        }
        if (!reg.test(this.postList[index].mobile)) {
          this.$toast('手机格式不正确')
          return
        }
        if (!this.postList[index].celsius) {
          this.$toast('请输入体温')
          return
        }
        this.$post(api.postList, {
          house_id: '0',
          resident: this.postList,
          residential_name: this.residential_name,
          address: this.SpecificAddress,
          street_code: this.columnsCode,
        })
          .then((response) => {
            this.postList = [
              {
                celsius: '',
                name: '',
                mobile: '',
                idnum: '',
                type: '0',
                sex: '1',
                been_hubei: '1',
                symptom: '1',
                touch_hubeipatient: '1',
              }
            ]
            this.SpecificAddress = ''
            this.streetValue = ''
            this.address = ''
            this.residential_name = ''
            this.remark = ''
            this.$toast('提交成功')
          })
          .catch((error) => {
            console.log(error)
          });
      });
    }
  },
  components: {
    [Area.name]: Area,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Dialog.Component.name]: Dialog.Component
  }
}
</script>
<style>
.health .health-list .van-cell {
  background: none;
  color: #000;
  line-height: .55rem;
  padding: .24rem .3rem;
}

.health .van-cell-group {
  margin: 0 .3rem;
}
</style>
<style scoped>
.van-dialog {
  width: 75%;
}

.health-content {
  margin: .35rem 0;
  color: #000;
  font-weight: bold;
}

.health-title {
  display: inline-block;
  margin-bottom: .2rem;
  font-size: .3rem;
  flex: 3;
  color: #FD5585;
}

.health-list {
  margin: 0 .3rem;
  background: #fff;
  display: flex;
  /* width: 100%; */
  height: 1rem;
  line-height: 1rem;
  /* border-radius: .5rem; */
  border-bottom: 0.02rem solid #ddd;
}

.health-list span:nth-of-type(1) {
  text-indent: .35rem;
  flex: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.health-list span:nth-of-type(2) {
  text-align: center;
  flex: 1;
}

.submit {
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}

.delPeople {
  width: 100%;
  height: auto;
  text-align: right;
}

.delPeople span {
  margin: .1rem;
  padding: .02rem .1rem;
  color: red;
  display: inline-block;
  border: 1px solid red;
  border-radius: .1rem;
}

.objbox {
  border: .02rem solid #ccc;
  margin: 0 .3rem .2rem;
  border-radius: .1rem;
  overflow: hidden;
}

.titlePeoPle {
  font-size: .3rem;
  height: .7rem;
  line-height: 1rem;
  color: #1989fa;
  text-align: center;
}
</style>
